<template>
  <div class="add-address back-page">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-1 wd-75 center strong" style="color: white">添加地址</div>
      </template>
    </HeaderTop>
    <van-form @submit="addAddr" class="mt-5">
      <van-cell-group inset>
        <van-field
          v-model="name"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        >
        </van-field>
        <van-field name="性别" label="先生/女士">
          <template #input>
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio name="1">先生</van-radio>
              <van-radio name="2">女士</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="address"
          name="地址"
          label="地址"
          placeholder="请选择地址"
          @click-input="selectAddress"
          :rules="[{ required: true, message: '请选择地址' }]"
        >
        </van-field>
        <van-field
          v-model="detailAddress"
          name="详细地址"
          label="详细地址"
          placeholder="请填写详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        >
        </van-field>
        <van-field
          v-model="addressTag"
          is-link
          readonly
          name="picker"
          label="地址标签"
          @click="showPicker = true"
        />
        <van-field
          v-model="phone"
          name="手机号"
          label="手机号"
          placeholder="请填写有用的手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field v-model="sPhone" name="备用手机" label="备用手机号" placeholder="选填" />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit" :to="{ name: 'AddAddress' }" >
          确定
        </van-button>
      </div>
    </van-form>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker :columns="tags" @confirm="selectedTag" @cancel="showPicker = false" />
    </van-popup>
    <router-view v-slot="{ Component }">
      <transition name="detail-show">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { constPinia, user } from "@/store/index";
import {successInfo_format} from '@/type/index'
import { storeToRefs } from "pinia";
import {addAddress} from '@/api'

const {nearByAddress}  = storeToRefs(constPinia())
const {user_id} = storeToRefs(user())
const router = useRouter();
const name = ref("");
const address = ref();
const detailAddress = ref("");
const phone = ref('')
const sPhone = ref('')
const sex = ref<string>("1");
const addressTag = ref("家");
const tags = ["家", "学校", "公司"];
const tagReflect = {
  家: '2',
  学校: '3',
  公司: '4',
};
const tag_type = computed(() => {
  return tagReflect[addressTag.value];
});
const showPicker = ref<boolean>(false);
//选择标签
const selectedTag = value => {
  addressTag.value = value;
  showPicker.value = false;
};
//选择地址
const selectAddress = (e: Event) => {
  e.target.blur();
  router.push({
    name: "SearchAddress",
  });
};
//添加收货地址
const addAddr = async() =>{
  const res = await addAddress<successInfo_format>(user_id.value,address.value,detailAddress.value,nearByAddress.value.geohash,name.value,phone.value,addressTag.value,sex.value,sPhone.value,tag_type.value)
  if(res.status == 1){
    router.back()
  }
}
watch(nearByAddress,()=>{
  if(nearByAddress){
    address.value = nearByAddress.value.name
  }
  else address.value = ''
})
</script>

<style lang="scss" scoped>
.add-address {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 22;
  overflow-x: hidden;
}
</style>
